<template>
<form class="tw-liblogintecent" @keydown.enter="login">
<div class="tw-login-item-wrap">
  <div class="tw-login-input-wrapper">
    <div class="xicon">
      <img class="ximg" src="@assets/xuser.png" />
    </div>
    <input v-model="username" autocomplete="off" spellcheck="false" type="text" placeholder="请输入帐号\手机号" maxlength="30" class="tw-login-input tw-login-input-with-prefix">
  </div>
  <div class="mt40 tw-login-input-wrapper">
    <div class="xicon">
      <img class="ximg" src="@assets/xpwd.png" />
    </div>
    <input v-model="password" autocomplete="off" spellcheck="false" type="password" placeholder="密码" class="tw-login-input tw-login-input-with-prefix">
  </div>
  <div class="remind-text">
    <p class="err-msg">{{errMsg}}</p>
    <!-- <a class="forget-password" :href="findPwdUrl">忘记密码</a> -->
  </div>
  <a class="submit-btn" @click="login">
    <span>登录</span>
  </a>
</div>
</form>
<!-- <form class="tw-liblogin" @keydown.enter="login">
  <div class="tw-liblogin-inputbox xusername">
    <input class="tw-liblogin-input" v-model="username" :placeholder="usernamePlaceholder" type="index" />
  </div>

  <div class="tw-liblogin-inputbox xpassword">
    <input class="tw-liblogin-input" v-model="password" :placeholder="passwordPlaceholder" type="password" />
  </div>

  <template v-if="isCaptcha">
    <div v-show="showCaptcha">
    <div class="tw-liblogin-inputbox xcaptche" v-if="captchaType==='code'">
      <input class="tw-liblogin-input" v-model="captcha" :placeholder="'请输入验证码'" type="index" />
      <a :class="['tw-liblogin-code', {'disable-click': disabled}]" @click="getCaptcha">{{tipText}}</a>
    </div>
    <div class="tw-liblogin-inputbox xpoint" v-else-if="captchaType==='click'">
      <Verify
        @success="handleSuccess"
        @error="handleError"
        :captchaType="captchaType"
        :captchaColor="{ sucColor: sucColor, errColor: errColor, movColor: movColor}"
        :imgSize="{ width: imgWidth, height: imgHeight }"
      ></Verify>
    </div>
    <div class="tw-liblogin-inputbox xpoint" v-else-if="captchaType==='slide'">
      <Verify
        @success="handleSuccess"
        @error="handleError"
        :captchaType="captchaType"
        :captchaColor="{ sucColor: sucColor, errColor: errColor, movColor: movColor}"
        :imgSize="{ width: imgWidth, height: imgHeight }"
      ></Verify>
    </div>
    </div>
  </template>

  <div class="tw-liblogin-text xright">
    <div class="tw-liblogin-text-left">
      <i :class="{twtips: errMsg}"></i>
      <span class="tw-liblogin-error">{{errMsg}}</span>
    </div>

    <div class="tw-liblogin-text-right">
    </div>
  </div>

  <a class="tw-liblogin-btn" @click="login">登录</a>

  <div class="tw-liblogin-text">
    <div class="tw-liblogin-text-center" v-if="!isConcise">
      <a :style="{fontWeight: linkWeight ? '700':'400'}" class="tw-liblogin-findpwd" :href="findPwdUrl">忘记密码</a>
      <span class="xcut"> | </span>
      <a :style="{fontWeight: linkWeight ? '700':'400'}" class="tw-liblogin-findpwd" :href="registerUrl">立即注册</a>
    </div>
    <div class="tw-liblogin-text-center" v-else>
      <a :href="toHome">{{linkText}}</a>
    </div>
  </div>

</form> -->
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
// import Verify from './Verify'

export default {
  name: 'tw-liblogin',

  props,

  // components: { Verify },

  mixins: [style],

  data() {
    return {
      logintype: '0',
      username: '',
      password: '',
      errMsg: '',
      captcha: '',
      showCaptcha: false,

      tipText: '获取验证码',
      time: 60,
      disabled: false
    }
  },

  created () {
    // if (this.isCaptcha) {
    //   let showCaptcha = this.$ui.cookie.get('showCaptcha')
    //   if (showCaptcha && showCaptcha === '1') {
    //     this.showCaptcha = true
    //   }
    // }
  },

  computed: {
    style () {
      return {
        linkColor: this.linkColor,
        isConcise: this.isConcise,
        linkText: this.linkText,
        toHome: this.toHome,
        btnColor: this.btnColor
      }
    }
  },

  methods: {
    setStyle () {
      const style = `
        ::root .tw-liblogin-text a,
        ::root .tw-liblogin-text .xcut {
          color: ${this.linkColor};
        }

        ::root .tw-libcaptcha-verify .verify-bar-area .verify-move-block:hover {
          background-color: ${this.movColor};
        }

        ::root .tw-liblogin-btn {
          background-color: ${this.btnColor};
        }
      `

      this.addStyle(style)
    },

    login () {
      const vm = this

      if (this.username === '') {
        this.errMsg = '请输入用户名'
        return
      }

      if (this.password === '') {
        this.errMsg = '请输入密码'
        return
      }
      // if (vm.showCaptcha && this.isCaptcha && this.captcha === '') {
      //   if (this.captchaType === 'code') {
      //     this.errMsg = '请输入验证码'
      //   } else {
      //     this.errMsg = '请完成验证'
      //   }
      //   return
      // }

      this.errMsg = ''
      const data = {
        type: 'password',
        username: this.username,
        password: this.password,
        loginSuccessUrl: this.loginSuccessUrl
      }
      if (this.isCaptcha) {
        data.captchaToken = this.captcha
      }

      this.$ui.login(data).catch((err) => {
        if (err.response && err.response.data) {
          if ([8000, 8001, 8002, 8004, 8007, 8008].includes(err.response.data.errorCode)) {
            vm.errMsg = err.response.data.errorMesage
          } else if (err.response.data.errorCode === 8005) {
            vm.errMsg = '请选择机构及角色'
          } else {
            vm.errMsg = '登录异常，请重试'
          }
        } else {
          vm.errMsg = '网络异常，请重试'
        }
        // if (vm.isCaptcha) {
        //   vm.showCaptcha = true
        //   vm.$ui.cookie.set('showCaptcha', '1')
        // }
      })
    },

    // 点击获取验证码
    getCaptcha () {
      if (!this.disabled) {
        this.setDisabled(true)
        this.timer()
      } else {
        return false
      }
    },
    // 倒计时
    timer () {
      if (this.time > 0) {
        this.tipText = this.time + 's后重新获取'
        this.time--
        setTimeout(this.timer, 1000)
      } else {
        this.setDisabled(false)
        this.time = 60
        this.tipText = '重新获取'
      }
    },
    // 设置disable的值
    setDisabled(val) {
      this.disabled = val
    },
    handleSuccess (val) {
      this.errMsg = ''
      this.captcha = val.captchaVerification
    },
    handleError (val) {
      this.captcha = ''
      this.errMsg = '验证失败，请重新验证'
    }
  },

  watch: {
    // swiperConfig: {
    //   deep: true,
    //   handler (val, old) {
    //     this.init()
    //   }
    // }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
